<script lang="ts" setup>
import { getShowValue } from "@/utils/equip";

interface Props {
    detailV2: Equip.EquipInfo;
}
const props = withDefaults(defineProps<Props>(), {});
</script>

<template>
    <section>
        <cite>
            <h1>数据监控</h1>
        </cite>
        <div class="content">
            <div v-if="props.detailV2.dtAI[0]" class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </div>
                <div class="right">
                    <h2>瞬时流量</h2>
                    <p>{{ getShowValue(props.detailV2.dtAI[0].value || 0, props.detailV2.dtAI[0].x1, props.detailV2.dtAI[0].x2, props.detailV2.dtAI[0].y1, props.detailV2.dtAI[0].y2) }} L/min</p>
                </div>
            </div>
            <div v-if="props.detailV2.dtAI[1]" class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </div>
                <div class="right">
                    <h2>累计流量</h2>
                    <p>{{ getShowValue(props.detailV2.dtAI[1].value || 0, props.detailV2.dtAI[1].x1, props.detailV2.dtAI[1].x2, props.detailV2.dtAI[1].y1, props.detailV2.dtAI[1].y2) }} m2</p>
                </div>
            </div>
            <div v-if="props.detailV2.dtAI[5]" class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </div>
                <div class="right">
                    <h2>氧气压力</h2>
                    <p>{{ getShowValue(props.detailV2.dtAI[5].value || 0, props.detailV2.dtAI[5].x1, props.detailV2.dtAI[5].x2, props.detailV2.dtAI[5].y1, props.detailV2.dtAI[5].y2) }} Kpa</p>
                </div>
            </div>
            <div v-if="props.detailV2.dtAI[6]" class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </div>
                <div class="right">
                    <h2>气源湿度</h2>
                    <p>{{ getShowValue(props.detailV2.dtAI[6].value || 0, props.detailV2.dtAI[6].x1, props.detailV2.dtAI[6].x2, props.detailV2.dtAI[6].y1, props.detailV2.dtAI[6].y2) }} %</p>
                </div>
            </div>
            <div v-if="props.detailV2.dtAI[7]" class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </div>
                <div class="right">
                    <h2>储罐压力</h2>
                    <p>{{ getShowValue(props.detailV2.dtAI[7].value || 0, props.detailV2.dtAI[7].x1, props.detailV2.dtAI[7].x2, props.detailV2.dtAI[7].y1, props.detailV2.dtAI[7].y2) }} Mpa</p>
                </div>
            </div>
            <div v-if="props.detailV2.dtAI[8]" class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </div>
                <div class="right">
                    <h2>气源压力</h2>
                    <p>{{ getShowValue(props.detailV2.dtAI[8].value || 0, props.detailV2.dtAI[8].x1, props.detailV2.dtAI[8].x2, props.detailV2.dtAI[8].y1, props.detailV2.dtAI[8].y2) }} Mpa</p>
                </div>
            </div>
        </div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
@use "@/styles/mixins";
section {
    .content {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 20px;
        .item {
            padding: 0 10px;
            background-color: #20253933;
            display: flex;
            align-items: center;
            border: 1px dashed #a5a7e2;
            border-radius: 4px;
            column-gap: 10px;
            .left {
                flex-shrink: 0;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                box-shadow: 0 0 3px 1px #a5a7e2;
                background-color: #202539;
                display: flex;
                justify-content: center;
                align-items: center;
                .icon {
                    color: #a5a7e2;
                    font-size: 24px;
                }
            }
            .right {
                display: flex;
                flex-direction: column;
                h2 {
                    color: #aaa;
                    font-size: 14px;
                    @include mixins.text-ellipsis();
                }
                p {
                    color: #f3eabf;
                    font-size: 16px;
                    @include mixins.text-ellipsis();
                }
            }
        }
    }
}
</style>
